<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body,
        #box {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script type="importmap">
        {
            "imports": {
                "three": "./../../three/build/three.module.js",
                "three/addons/": "./../../three/examples/jsm/",
                "three/example/": "./../../three/examples/"
            }
        }
    </script>

    <script type="module">
        import * as THREE from 'three'
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
        import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'

        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
        import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js'
        import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'

        // 伽马校正后处理Shader
        import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
        // ShaderPass功能：使用后处理Shader创建后处理通道
        import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';

        const box = document.getElementById('box')
        const scene = new THREE.Scene()
        // 相机
        const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)
        camera.position.set(5, 5, 5)
        // 渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
        renderer.setSize(box.clientWidth, box.clientHeight)
        box.appendChild(renderer.domElement)
        new OrbitControls(camera, renderer.domElement)

        // 环境光
        scene.add(new THREE.AmbientLight(0xffffff, 4))
        // 参考线
        scene.add(new THREE.AxesHelper(1000))

        // 创建后处理对象EffectComposer，WebGL渲染器作为参数
        const composer = new EffectComposer(renderer);
        const renderPass = new RenderPass(scene, camera);
        composer.addPass(renderPass);

        // 创建OutlinePass通道
        const outlinePass = new OutlinePass(new THREE.Vector2(box.clientWidth, box.clientHeight), scene, camera);
        outlinePass.visibleEdgeColor.set(0x00ffff);
        outlinePass.edgeThickness = 4;
        outlinePass.edgeStrength = 6;
        composer.addPass(outlinePass);

        // 创建伽马校正通道
        const gammaPass = new ShaderPass(GammaCorrectionShader);
        composer.addPass(gammaPass);

        // 加载模型 gltf/ glb 
        const loader = new GLTFLoader()
        loader.load('./zhanji.glb', (gltf) => {
            scene.add(gltf.scene)
            gltf.scene.scale.set(0.005, 0.005, 0.005)

            outlinePass.selectedObjects = [gltf.scene];

            window.addEventListener('mousedown', onDocumentClick, false);
            function onDocumentClick(event) {
                event.preventDefault();
                const mouse = new THREE.Vector2();
                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
                const raycaster = new THREE.Raycaster();
                raycaster.setFromCamera(mouse, camera);
                const intersects = raycaster.intersectObjects([gltf.scene]);

                if (intersects.length > 0) {
                    console.log(intersects)
                    outlinePass.selectedObjects = [intersects[0].object]
                } else {
                    outlinePass.selectedObjects = []
                }
            }

        })

        animate()
        function animate() {
            requestAnimationFrame(animate)
            composer.render()
        }
    </script>
</body>

</html>